<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>哈哈哈</title>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h2>插入操作</h2>
				<h4>部门名称:<input type="text"  v-model="savedept.name"/></h4>
				<h4>部门位置:<input type="text" v-model="savedept.loc"/></h4>
				<button @click="saveit">插入</button>
				<hr />
			</div>
			<div align="center">
				<h2>修改操作</h2>
				<h4>部门编号:<input type="number" disabled="disabled" v-model="updatedept.id"></h4>
				<h4>部门名称:<input type="text" v-model="updatedept.name"/></h4>
				<h4>部门位置:<input type="text" v-model="updatedept.loc"/></h4>
				<button @click="updateit">修改</button>
				<hr />
			</div>
			<table align="center" border="3px" width="65%">
				<tr>
					<th colspan="4"><h2>公司部门信息一览表</h2></th>
				</tr>
				<tr>
					<th>部门编号</th>
					<th>部门名称</th>
					<th>部门位置</th>
					<th>操作</th>
				</tr>
				<tr align="center" v-for="dept in depts">
					<td v-text="dept.id" width="10%"></td>
					<td v-text="dept.name"></td>
					<td v-text="dept.loc"></td>
					<td width="20%">
						<button @click="backto(dept)">修改</button>
						<button @click="deleteit(dept)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script>
		axios.defaults.baseURL = "http://localhost:8080/dept"
			new Vue({
				el : "#app",
				data:{
					depts:[],
					savedept:{
						name : '',
						loc : '',
					},
					updatedept:{
						id : '',
						name : '',
						loc : ''
					}
				},
				methods:{
					async getAll(){
						let {data} = await axios.get("/getAll")
						this.depts = data
					},
					async deleteit(dept){
						let y = confirm("确认删除吗?")
						if(y == true){
							let {data} = await axios.delete("/deleteDept?id="+dept.id)
						alert(data)
						this.getAll()
						}	
					},
					async saveit(){
							let a = confirm("请确认数据:\n部门名称:"+savedept.name+"部门位置:"+savedept.loc)
							if(a == true){
								let {data} = await axios.post("/saveDept",this.savedept)
								this.getAll()
								this.savedept = {}
								alert(data)
							}	
					},
					backto(dept){
						this.updatedept = JSON.parse(JSON.stringify(dept))
					},
					async updateit(){
						let y = confirm("确认修改吗?")
						if(y == true){
							let {data} = await axios.put("/updateDept",this.updatedept)
						this.getAll()
						this.updatedept = {}
						alert(data)
						}
					}
				},
				created(){
					this.getAll()
				}
			})
		</script>
	</body>
</html>
